<template>
  <!-- 新增设备 -->
  <div style="width: 100%;">
    <a-button type="primary" @click="NewEquipmentAdded()">
    <template #icon><PlusOutlined /></template>
    新增设备
  </a-button>
  </div>
  

  <div v-for="(item,index) in dataSouce" :key="index" class="TotalEquipmentManagement">
    <!-- 内部布局 -->
    <a-card
      class="EquipmentManagementContent" 
      bodyStyle="display:flex;padding: 0 "
    >
    <!-- 左侧头像 -->
    <p class="left" style="margin: 10px; ">
      <a-image :src="item.DeviceAvatar" />
    </p>
    <!-- 右侧内容 -->
    <p class="right" style="width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        <h3>{{ item.DeviceName }}</h3>
        <span style="color:green ; ">
          <a-popover>
            <template #content>
              <p>{{ item.MonitoringPoints }}</p>
            </template>
            监测点:{{ item.MonitoringPoints }}
          </a-popover>
        </span>
        <div>最新数据时间:{{ item.LatestDataTime }}</div>
        <div>最近登录用户:{{ item.RecentlyLoggedInUsers }}</div>
    </p>
    <!-- 设备有无异常的图标 -->
    <div class="normal">
      <div v-if="item.tp === 1">
        <img src="./img/normal.png">        
      </div>
      <div v-else>
        <img src="./img/abnormal.png">        
      </div>
    </div>

    <!-- 点 -->
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        <EllipsisOutlined style="font-size: 24px; position: absolute; right: 10px;" />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item >
            <a href="javasdript:;" @click.prevent="BasicInformation()">基础信息</a>
          </a-menu-item>
         <a-menu-item>
            <a href="javascript:;" @click.prevent="loginLog()">登录日志</a>
          </a-menu-item>
         <a-menu-item>
            <a href="javascript:;" @click.prevent="showModalDel(item._id)">删除</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

  </a-card>
  </div>
  <!-- 分页 -->
  <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; bottom: 40px; right: 40px; " >
    <p style="margin-bottom: 0px;"> 共{{ dataSouce.length }}条 </p>
    <a-pagination @change="currentChage" v-model:current="current" :total="dataSouce.length" show-less-items />
  </div>
  

  <!-- 抽屉 -->
  <a-drawer
    v-model:open="open"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    style="color: red"
    title="设备详情"
    placement="right"
    @after-open-change="afterOpenChange"
  >
  <!-- 标签页 -->
    <a-tabs v-for="(item,index) in BasicEquipmentInformation" :key="index" v-model:activeKey="activeKey">
      <!-- 基本信息 -->
      <a-tab-pane key="1" tab="基本信息" ref="ATabPane">
        <p style="display:flex;  align-items: center;">
          设备名称:  <div v-show="flagtwo">{{ item.DeviceName }}</div>
          <a-form v-show="flag" :model="formState" name="basic" >
            <a-form-item name="username" >
              <a-input v-model:value="formState.username" />
            </a-form-item>
          </a-form>
          <div @click="EditO()">
            <EditOutlined />
          </div>
        </p>
        <p>设备ID: {{ item.DeviceID }}</p>
        <p>设备机构: {{ item.EquipmentOrganization }}</p>
        <p>设备最新位置: {{ item.LatestLocationOfEquipment }} </p>
        <p>设备IP: {{ item.DeviceIP }} </p>
        <p>系统版本: {{ item.SystemVersion }} </p>
        <p>应用版本: {{ item.ApplicationVersion }} </p>
        <p>设备型号: {{ item.EquipmentModel }} </p>
        <p>售卖时间: {{ item.SellingTime }} </p>
        <p>质保期限: {{ item.WarrantyPeriod }} </p>
        <p>当前登录用户: {{ item.CurrentLoggedInUser }} </p>
        <p>设备状态: {{ item.DeviceStatus }} </p>
        <p>设备电量: {{ item.EquipmentBatteryLevel }} </p>
        <p>物联网卡卡号: {{ item.IoTCardNumber }} </p>
        <p>物联网卡剩余流量: {{ item.RemainingIoTCardTraffic }} </p>
        <p>物联网卡有效期: {{ item.ValidityPeriodOfIoTCard }} </p>
      </a-tab-pane>
      <!-- 登录日志 -->
      <a-tab-pane key="2" tab="登录日志" force-render ref="ATabPane">
        <!-- 登录日志表格 -->
        <a-table :columns="columns" :data-source="data" :pagination="false">
          <template #headerCell="{ column }">
            <template v-if="column.key === 'name'">
              <span>
                <smile-outlined />
                登陆时间
              </span>
            </template>
          </template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <p>
                {{ record.name }}
              </p>
            </template>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>

  <!-- 新增设备的抽屉 -->
  <a-drawer
    title="新增设备"
    :width="400"
    :open="addopen"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    <a-form :model="form" layout="vertical">
      <!-- 设备名称 -->
      <a-row>
        <a-col>
          <a-form-item label="设备名称" devicename="devicename">
            <a-input v-model:value="form.devicename" placeholder="请输入设备名称" />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 监测点 -->
      <a-row>
        <a-col>
          <a-form-item label="监测点" monitoringpoints="monitoringpoints">
            <a-input v-model:value="form.monitoringpoints" placeholder="请输入监测点" />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 最近登录时间 -->
      <a-row>
        <a-col>
          <a-form-item label="最近登录时间" dateTime="dateTime">
            <a-input v-model:value="form.dateTime" placeholder="最近登录时间" />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 最近登录用户 -->
      <a-row>
        <a-col>
          <a-form-item label="最近登录用户" name="name">
            <a-input v-model:value="form.name" placeholder="最近登录用户" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #extra>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="operateAdd">确定</a-button>
      </a-space>
    </template>
  </a-drawer>

  <!-- 删除弹窗 -->
  <a-modal v-model:open="delopen" @ok="setDel">
      <p>您确定要删除吗?</p>
  </a-modal>
</template>


<script setup>
// 图标
import { EllipsisOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { onMounted, ref, watch, reactive } from 'vue';
import managementAPI from '@/api/management'

onMounted(()=>{
  // 页面一打开是的时候进行渲染,调用getRenderList拿到新数组进行渲染
  getRenderList() ,
  // 列表
  getList()
  // 操作(新增/编辑)
  // operateAdd()
  // 删除
  // setDel()
})

  



// 设备基本信息-设备名称的更改操作
const formState = reactive({
  username: '1234',
  remember: true,
});
const flag = ref(false)
const flagtwo = ref(true)
const EditO = ()=>{
  flag.value = !flag.value
  flagtwo.value = !flagtwo.value
  formState.username = '假数据'
  
}

// 抽屉开关
const open = ref(false);
const afterOpenChange = bool => {
  console.log('open', bool);
};

// 默认分页打开在第几页
const current = ref(1);
// 默认每页展示10条
const pageSize = ref(10)

// 标签页默认第几页
const activeKey = ref('1');

const delId = ref('')


// 点击基本信息打开关闭
function BasicInformation(){
  activeKey.value = '1'
  open.value = true;
  console.log(activeKey)
} 

// 点击登录日志打开关闭
function loginLog(){
  activeKey.value = '2'
  open.value = true;
  console.log(open.value)
} 



// 渲染设备管理数据
const dataSouce = ref([])
// 列表
const getList = async()=>{
  const data = await managementAPI.getList({
    pageIndex:1,
    pageSize:10
  })
  console.log(data)
  dataSouce.value = data.data
}

// 操作(新增/编辑)
// 新增设备抽屉
const form = reactive({
  devicename:'',
  monitoringpoints:'',
  dateTime: '',
  name: '',
});
const addopen = ref(false);
const NewEquipmentAdded = () => {
  addopen.value = true;
};
const onClose = () => {
  addopen.value = false;
};
const operateAdd =async () => {
  const data = await managementAPI.operate({
    DeviceID:0,
    idEdit:0,
    DeviceName:form.devicename,
    MonitoringPoints:form.monitoringpoints,
    LatestDataTime:form.dateTime,
    RecentlyLoggedInUsers:form.name,
    tp:1,
    DeviceAvatar:'https://pic.vjshi.com/2018-09-06/30bc1d5ab10a2b569f345c06af18375e/00001.jpg?x-oss-process=style/watermark'
  })
    form.devicename=''
    form.monitoringpoints=''
    form.dateTime=''
    form.name=''
    addopen.value = false;
    getList() 
  }


// 删除
const delopen = ref(false);
const showModalDel = (id) => {
  delopen.value = true;
  delId.value = id
};

const setDel = async()=>{
  const data = await managementAPI.setDel({
    _id:delId.value,
  })
  console.log(data);
  getList()
  delopen.value = false;
};



// 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数(page,pageSize)需要同时存在
const currentChage = (page,pageSize) => {
  // 将新的页码赋值给current
  current.value = page
}

// 把新数组封装成函数,方便之后调用
const getRenderList = () => {
  dataSouce.value = dataSouce.value.slice((current.value - 1) * pageSize.value, current.value * pageSize.value)
}

// 监听current,当页码发生变化时,从新渲染页面(调用getRenderList拿到新数组)
watch([current], () => {
  getRenderList() 
})


// 设备基本信息
const BasicEquipmentInformation = [
  {
    DeviceName:'千里眼设备名称',
    DeviceID:'JJA202401028890234s',
    EquipmentOrganization:'机构名称',
    LatestLocationOfEquipment:'江苏省南京市****',
    DeviceIP:'192.168.0.2',
    SystemVersion:'v2.0.3',
    ApplicationVersion:'安卓11.0.0',
    EquipmentModel:'YF-DX-1A',
    SellingTime:'2023-07-29 16:01:50',
    WarrantyPeriod:'2028-10-10',
    CurrentLoggedInUser:'王***',
    DeviceStatus:'在线',
    EquipmentBatteryLevel:'55%',
    IoTCardNumber:'8008 5645 8789 898',
    RemainingIoTCardTraffic:'20G',
    ValidityPeriodOfIoTCard:'2028-12-20'
  }
]

// 设备详情数据-登录日志
const columns = [
  {
    name: '登录时间',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '登陆账号',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '登陆人',
    dataIndex: 'address',
    key: 'address',
  },
];
const data = [
  {
    key: '1',
    name: '2023-12-13 10:20:56',
    age: '1308*******',
    address: '洪****',
  },
  {
    key: '2',
    name: '2023-12-13 10:20:56',
    age: '1308*******',
    address: '洪****',
  },
  {
    key: '3',
    name: '2023-12-13 10:20:56',
    age: '1308*******',
    address: '洪****',
  },
];
</script>


<style scoped>

.normal{
  position: absolute;
  top: 0;
  left: 10px;
}

.normal img{
  width: 24px;
  height: 24px;
}

h3{
  margin-top: 12px;
  margin-bottom: 4px;
}

.TotalEquipmentManagement{
  width: 340px;
  /* display:flex; */
  display: inline-block;
  margin: 10px ;
  padding:0 ;
  position: relative;
}

.EquipmentManagementContent{
  display:flex;
  justify-content: center;
  align-items: center;
  /* flex-direction :column; */
}
.EquipmentManagementContent .left{
  width: 100px ;
  height: 100px ;
  margin-top: 30px
}

.EquipmentManagementContent .left img{
  width: 100% ;
  height: 100px ;
}

</style>